<template>
  <div id="app">
    <left-popup></left-popup>
    <router-view v-if="$store.getters.is_pageloaddone&&isRouterAlive" />
    <van-loading v-else color="#1989fa" />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { mapState } from "vuex";
import leftPopup from "./components/Base/Popup/left";
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  methods: {
    ...mapMutations([
      "user_loaddone",
      "ad_loaddone",
      "section_loaddone",
      "messagecount_loaddone",
    ]),
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
  },
  computed: {
    ...mapState(["page_control"]),
  },
  mounted() {
    // 1.加载用户信息
    this.$http
      .get("/load/get/userinfo")
      .then((res) => {
        if (res.data.status === 200) {
          this.user_loaddone({
            login: true,
            userinfo: res.data.userinfo,
          });
          // 1.1加载消息数量
          this.$http
            .get("/load/get/messagecount")
            .then((res) => {
              if (res.data.status === 200) {
                this.messagecount_loaddone(res.data.count);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else if (res.data.status === 201) {
          this.user_loaddone(false);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    // 2.加载板块信息
    this.$http
      .get("/load/get/section")
      .then((res) => {
        if (res.data.status === 200) {
          this.section_loaddone(res.data.sections);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    // 3.加载广告信息
    this.$http
      .get("/load/get/ad_list")
      .then((res) => {
        if (res.data.status === 200) {
          this.ad_loaddone(res.data.ad_list);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  components: {
    "left-popup": leftPopup,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  background: #fafafa;
}
.page-body {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
